<!DOCTYPE html>
<!--    使用 Thymeleaf 模版引擎-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>JackLin的博客</title>

    <!--    标签栏图标   -->
    <link rel="shortcut icon" href="/image/logo.png" type="image/x-icon">

    <!--    引入导航栏的 css 代码文件-->
    <link rel="stylesheet" th:href="@{/css/article-title.css}">
    <!--    引入右侧关于  "博客介绍"，"标签"，"分类" 的 css 样式文件-->
    <link rel="stylesheet" th:href="@{/css/article-introduce.css}">
    <!--    引入动画的 css 样式文件-->
    <link rel="stylesheet" th:href="@{/css/animate.css}">
    <!--    滑动到顶部火箭 -->
    <link rel="stylesheet" type="text/css" th:href="@{/css/rocketTop.css}">
    <!--    分页-->
    <link rel="stylesheet" th:href="@{/css/pagenation/myPagination.css}">
    <!--    关于底部备案号的 css 样式文件   -->
    <link rel="stylesheet" th:href="@{/css/blog-footer.css}">

    <!--    字体图标    -->
    <script src="http://at.alicdn.com/t/font_1697913_qro0wpzn1zo.js"></script>
    <!--    引入 JQuery-->
    <script th:src="@{/js/jquery-3.4.1.js}"></script>
    <!--    引入平滑滚动的 js-->
    <script th:src="@{/js/jquery.scrollTo.js}"></script>
    <!--    引入滚动监测的 js-->
    <script th:src="@{/js/jquery.waypoints.js}"></script>
    <!--    引入 “溢出显示省略号” 的 js-->
    <script th:src="@{/js/jquery.dotdotdot.js}"></script>
    <!--    滑动到顶部 js -->
    <script type="text/javascript" th:src="@{/js/rocketTop.js}"></script>
    <!--    百度站长统计  -->
    <!--    <script th:src="@{/js/baidu.js}"></script>-->

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-image: url("/image/bc.png");
        }

        /* ##############################   Body    ################################*/

        .content {
            width: 100%;
            padding-top: 35px;
            display: inline-block; /*  由内部的内容的高度撑起盒子的高度    */
        }


        .content-bottom {
            margin: 80px 170px;
            margin-bottom: 0px;
            width: 1135px;
            border-radius: 15px;
            display: inline-block; /*  由内部的内容的高度撑起盒子的高度    */
        }

        .content-bottom p {
            color: #000000;
            font-weight: lighter;
            font-size: 22px;
        }

        /*******************      左侧的一系列博客              */
        .content-left {
            width: 735px;
            /*background-color: #1bd7db;*/
            box-sizing: border-box;
            margin-left: 30px;
            margin-top: 10px;
            float: left;

        }

        .content-left .icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            padding-left: 6px;
            fill: currentColor;
        }

        .content-left .each-data {
            width: 735px;
            /*height: 300px;*/ /*  高度随着内容的高度改变*/
            background-color: #ffffffbf;
            box-sizing: border-box;
            border-radius: 5px;
            margin-bottom: 25px;
            box-shadow: 0px -5px 10px yellow, 5px 0 10px red; /* 彩色边框 */
            position: relative;
            display: inline-block; /*  让 li 标签随着里面的内容的高度的增加而增加*/
            border: 2px solid #ccc;
        }

        .content-left .each-data .article-title {
            /*height: 60px;*/ /* 高度有内容的高度决定*/
            width: 700px;
            line-height: 60px;
            font-size: 36px;
            font-weight: bolder;
            background: linear-gradient(to right, #fa709a 0%, #fee140 100%);
            -webkit-background-clip: text;
            color: transparent;
            font-family: 华文细黑;
            margin-left: 15px;

        }

        .content-left .each-data ul {
            height: 45px;
            width: 600px;
            margin-left: 20px;
            border-bottom: 3px transparent solid; /*      彩色边框    */
            /*border-image: linear-gradient(to right,#ff3c00,#23b7cb) 1 10;*/
            border-image: linear-gradient(to right, #fea15c, #a6d2ad) 1 10;
        }

        .content-left .each-data ul li {
            height: 45px;
            width: 130px;
            margin-left: 20px;
            float: left;
            /*background-color: #0e8dc7;*/
            text-align: center;
            line-height: 45px;
            list-style: none;
        }

        .content-left .each-data .article-content {
            width: 702px;
            height: 135px;
            margin-top: 5px;
            margin-left: 15px;
            /*background-color: orange;*/
            font-size: 20px;
            overflow: hidden;
        }

        .content-left .each-data .readmore {
            width: 90px;
            height: 40px;
            cursor: pointer;
            border-radius: 5px;
            border: 1px solid #cccccc;
            margin: 10px auto;
        }

        .content-left .each-data .readmore a {
            width: 100%;
            height: 100%;
            margin: 0 auto;
            display: block;
            line-height: 40px;
            text-align: center;
            text-decoration: none;
            background: -webkit-linear-gradient(359deg, rgb(255, 149, 250) 35%, rgb(103, 241, 203) 81%);
            font-size: 19px;
            font-family: sans-serif;
        }

        .content-left .each-data span {
            display: inline-block;
        }

        /************     分页导航条      *******************8*/
        .pagination {
            margin: 10px auto;
            text-align: center;
        }


        /*  #####################   搜索框     ################33*/
        .search {
            width: 645px;
            height: 545px;
            position: fixed;
            top: 80px;
            right: 100px;
            background-color: palegreen;
            border-radius: 10px;
            box-shadow: 3px 3px 3px 3px #cccccc;
            display: none;
        }

        .search-title {
            width: 100%;
            height: 45px;
        }

        .search-title span {
            cursor: pointer;
        }

        .search-title .icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            padding-left: 6px;
            fill: currentColor;
            overflow: hidden;
        }

        .search-title #search-input {
            width: 600px;
            height: 43px;
            border-radius: 5px;
            border: 1px solid #000000;
            font-weight: bold;
            line-height: 43px;
            font-size: 24px;

        }

        /*  设置 PlaceHolder 的颜色 Chrome 浏览器*/
        input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
            /* WebKit browsers */
            color: #cccccc;
        }

        .search .search-list {
            width: 100%;
            height: 500px;
            overflow-y: auto;
            border-radius: 10px;
            padding-top: 4px;

        }

        .search .search-list div {
            width: 100%;
            height: 150px;
            background-color: pink;
            /*border: 1px solid #000;*/
            display: inline-block;
            box-shadow: 1px 1px 1px;
            border-radius: 5px;
        }

        /**************         右侧              ******************/
        /*      文章统计,这部分 CSS 抽取出来了，放在 article-introduce.css  */

        /*************        文章底部      ******************88*/
        /*    关于备案号的css代码，抽取出来了，放在 blog-footer.css */

    </style>

</head>
<body>

<!--    文章页面：头部导航栏-->
<div th:replace="~{common/commonsfile::article-topbar}"></div>

<!--    中部内容-->
<div class="content">

    <div class="content-bottom" id="text">

        <div id="content-left" class="content-left">

            <div class="each-data" th:each="blog:${blogs}">
                <p class="article-title" th:text="${blog.getBtitle()}"></p>
                <ul>

                    <li class="article-time">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-rili"></use>
                        </svg>
                        <span th:text="${#dates.format(blog.getCreatetime(), 'yyyy-MM-dd')}"></span>
                    </li>

                    <li class="article-views">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-yanjing"></use>
                        </svg>
                        <span th:text="${blog.getViews()}"></span>
                    </li>

                    <li class="article-starts">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-wenjianjia"></use>
                        </svg>
                        <span th:text="${blog.getType().getTypename()}"></span>
                    </li>
                </ul>
                <div class="article-content box after dot5" th:text="${blog.getBcontent()}"></div>
                <div class="readmore">
                    <a th:href="@{/article/} + ${blog.bidToString()}" id="readmore">阅读更多</a>
                </div>
            </div>

            <!--    分页  -->
            <div id="pagination" class="pagination"></div>
            <!--    一共有多少条分类，利用这个span标签来临时储存数据，在到 js 中进行操作   -->
            <span th:text="${blogNumber}" class="type-numbers" style="display: none"></span>
            <!--    存放当前页码-->
            <span th:text="${currentPage}" class="span-currentPage" style="display: none"></span>
            <!--    隐藏的 form 表单,用于处理分页时的请求-->
            <form class="hide-form" th:action="@{/changePageBlog}" method="post" style="display: none">
                <input type="text" class="currentpage" name="currentPage">
            </form>


        </div>

        <!--    将右侧关于介绍博客，文章分类，标签的部分抽取出来，这里直接使用-->
        <div th:replace="~{common/commonsfile::article-rightbar}"></div>

    </div>

</div>

<!--    文章底部-->
<div th:replace="~{common/commonsfile::blog-footerbar}"></div>

<!--    滑动顶部小火箭 -->
<div id="shape">
    <div class="shapeColor">
        <div class="shapeFly">
        </div>
    </div>
</div>

<!--    注意：所有放在搜索框中的标签，类名都必须要带 search  ，方面搜索框的显示与隐藏-->
<div class="search" id="my-search-box">
    <div class="search-title">
        <input id="search-input" class="search-input" type="text" placeholder="Searching...">
        <span class="search-ico">
            <svg class="icon" aria-hidden="true">
             <use xlink:href="#icon-sousuo"></use>
            </svg>
        </span>
    </div>
    <div class="search-list">
        <div id="list-1" class="search-list-1"></div>
        <div id="list-2" class="search-list-1"></div>
        <div id="list-3" class="search-list-1"></div>
        <div id="list-4" class="search-list-1"></div>
        <div id="list-5" class="search-list-1"></div>
        <div id="list-6" class="search-list-1"></div>
        <div id="list-7" class="search-list-1"></div>
    </div>

</div>

<div id="to-baidu" title="百度一下"></div>
<div id="copy-text" title="复制到剪切板"></div>

<textarea id="hide-text" style="display: none"></textarea>

<!--    分页需要的 js 代码-->
<script th:src="@{/js/pagenation/myPagination.js}"></script>

<!--    关于时间统计的 JS 代码-->
<script th:src="@{/js/time.js}"></script>

<!--    关于动态背景线条的 JS 代码-->
<script color="255,69,0" opacity='1' zIndex="1" count="500" th:src="@{/js/canvas-nest.js}"
        type="text/javascript"></script>

<script>
    window.addEventListener('load', function (event) {

        /**
         *      分页, 提交 form 表单
         * */
        var typeNumbers = parseInt($('.type-numbers').text());      //  一共有多少个分类
        var eachPageNumber = 6;        // 每页 6 条记录
        var pageNumber = Math.ceil(typeNumbers / eachPageNumber);     // 总页数
        var currentPage;        // 当前所在页码
        // console.log($('.span-currentPage').text());
        if ($('.span-currentPage').text() === '') {
            // 第一次访问，页码为1
            currentPage = 1;
        } else {
            currentPage = $('.span-currentPage').text();
        }
        console.log("初始页面为" + currentPage);
        new Page({
            id: 'pagination',
            pageTotal: pageNumber, //必填,总页数
            pageAmount: eachPageNumber,  //每页多少条
            dataTotal: typeNumbers, //总共多少条数据
            curPage: currentPage, //初始页码,不填默认为1;因为是重新发送一个请求，所以当前页码会改变，需要处理一下
            pageSize: 5, //分页个数,不填默认为5
            showPageTotalFlag: true, //是否显示数据统计,不填默认不显示
            showSkipInputFlag: true, //是否支持跳转,不填默认不显示
            // 切换分页按钮每次会触发的事件，在方法中this.curPage,是当前页数，直接可以进行对应的ajax了
            getPage: function (page) {
                currentPage = page;
                $('.currentpage').val(page);        // 将当前页码赋值给 input 标签，里面的值需要提交给后端
                $('.hide-form').submit();       // 执行表单提交到服务器
            }
        });


        /**
         *      增加了 百度一下 图标显示并跳转到百度搜索的功能，以及复制到剪切板图标
         * */
        var selectedText = '';
        var text = document.getElementById('text');
        var ico = document.getElementById('to-baidu');
        var copy = document.getElementById("copy-text");
        var hideText = document.getElementById("hide-text");
        text.addEventListener('mouseup', function (event) {
            // 获得选中的文本
            selectedText = window.getSelection().toString();

            if (selectedText.length !== 0) {

                /*  改变一些样式，让按钮显示出来  */
                ico.style.display = 'block';
                ico.style.left = event.pageX + 'px';
                ico.style.top = event.pageY + 'px';

                copy.style.display = 'block';
                copy.style.left = (event.pageX + 52) + 'px';
                copy.style.top = event.pageY + 'px';

                // 同时将p 标签里面的内容复制到隐藏 textarea 中
                hideText.innerText = selectedText;
                console.log("复制的文本值为：" + hideText.innerText);
                hideText.select();

                document.execCommand("copy");

                console.log(ico);
                console.log(copy)
            }
        });
        // 点击 “百度一下” 图标，跳转到百度
        document.addEventListener('mousedown', function (event) {
            var clickId = event.target.id;
            if (clickId === 'to-baidu') {
                window.open('https://baidu.com/s?wd=' + selectedText, 'target', '');
            } else if (clickId === 'copy-text') {
                alert("复制成功！");
            } else {
                ico.style.display = 'none';
                copy.style.display = 'none';
            }

        });


        /**
         *      实现点击搜索按钮弹出搜索框的功能 ---》 具体的搜索功能暂未实现
         * */
        var searchBtn = document.getElementById('search-article');
        var searchBox = document.getElementsByClassName('search')[0];
        searchBtn.addEventListener('click', function () {
            searchBox.style.display = 'block';
        });
        document.addEventListener('mousedown', function (event) {
            var targetName = event.target.className;
            var inputDiv = document.getElementById('search-input');

            // 类名中不包含 search，或者为 undefined, 说明点击了其他地方
            if (targetName === undefined) {
                searchBox.style.display = 'none';
                inputDiv.value = '';

            } else {
                if (targetName.indexOf('search') === -1) {  // 不包含 search，返回 -1
                    searchBox.style.display = 'none';
                    inputDiv.value = '';
                    // 这里不清空
                }
            }


        });


        /**
         *      溢出显示省略号的 js 代码
         * */
        var $dot5 = $('.dot5');
        $dot5.append(' <a class="toggle" href="#"><span class="open">[ + ]</span></a>');

        function createDots() {
            $dot5.dotdotdot({
                after: 'a.toggle'
            });
        }

        function destroyDots() {
            $dot5.trigger('destroy');
        }

        createDots();
        $dot5.on(
            'click',
            'a.toggle',
            function () {
                $dot5.toggleClass('opened');

                if ($dot5.hasClass('opened')) {
                    destroyDots();
                } else {
                    createDots();
                }
                return false;
            }
        );


        /**
         *      发送 Ajax 请求，统计“文章数量”，“标签数量”， “访客数量等信息”
         * */
        $.ajax("/Statistic", {
            type: "GET",
            dataType: "JSON",
            success: function (data, status) {
                $('#article-numbers').text(data.blogNumbers);
                $('#type-numbers').text(data.typeNumbers);
                $('#tag-numbers').text(data.tagNumbers);
            }
        });

        // 滚到顶部按钮
        $("#btn-up").click(function () {
            $(window).scrollTo(0, 700);
        });

        // 滚动监测
        var waypoint = new Waypoint({
            element: document.getElementById('content-left'),
            handler: function (direction) {
                if (direction === 'down') {
                    console.log('down');
                    $("#btn-up").show(400);
                } else if (direction === 'up') {
                    console.log('up');
                    $("#btn-up").hide(400);
                }
            }
        })

    })
</script>


<canvas class="fireworks" style="position:fixed;left:0;top:0;z-index:10;pointer-events:none;"></canvas>
<script type="text/javascript" src="js/click.js"></script>

</body>
</html>